import React from 'react'
import { Form, Input, Button, Space } from 'antd'
import { Form1Config, layout } from './FormConfig'
import _ from 'lodash'
import CommonSelect from '@/common/CommonSelect'

const Components = {
  Input,
  Select: CommonSelect,
}

const Form1 = ({ setCurrent }) => {
  const onFinish = (values) => {
    setCurrent('add')
    console.log(values)
  }
  const handlerGoBack = () => {
    setCurrent('minus')
  }
  return (
    <div>
      <h1>侯德康</h1>

      <Form name="Form1" onFinish={onFinish} {...layout}>
        {_.map(Form1Config, (item, key) => {
          const Component = item.component ? Components[item.component] : ''

          return (
            <div key={item.id}>
              <Form.Item
                name={item.name}
                label={item.label}
                rules={item.rules}
                {...item.props}
                style={{ flex: 1 }}
              >
                <Component
                  placeholder={item.placeholder}
                  {...item.componentProps}
                />
              </Form.Item>
            </div>
          )
        })}
        <Form.Item className="common-form-footer-btns">
          <Space>
            <Button onClick={handlerGoBack}>上一步</Button>
            <Button type="primary" htmlType="submit">
              下一步
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  )
}

export default Form1
